<template>
    <div class="singer">
        <div class="bg">
            <span>万千歌手</span>
            <span>尽在眼前</span>
        </div>
        <div class="singer-cat w">
            <ul class="area">
                <li :class="currentArea == -1 ? 'singer-cat-style' : ''" @click="toggleSingerArea(-1)">全部</li>
                <li :class="currentArea == 7 ? 'singer-cat-style' : ''" @click="toggleSingerArea(7)">华语</li>
                <li :class="currentArea == 96 ? 'singer-cat-style' : ''" @click="toggleSingerArea(96)">欧美</li>
                <li :class="currentArea == 8 ? 'singer-cat-style' : ''" @click="toggleSingerArea(8)">日本</li>
                <li :class="currentArea == 16 ? 'singer-cat-style' : ''" @click="toggleSingerArea(16)">韩国</li>
                <li :class="currentArea == 0 ? 'singer-cat-style' : ''" @click="toggleSingerArea(0)">其他</li>
            </ul>
            <ul class="type">
                <li :class="currentCat == -1 ? 'singer-cat-style' : ''" @click="toggleSingerCat(-1)">全部</li>
                <li :class="currentCat == 1 ? 'singer-cat-style' : ''" @click="toggleSingerCat(1)">男</li>
                <li :class="currentCat == 2 ? 'singer-cat-style' : ''" @click="toggleSingerCat(2)">女</li>
                <li :class="currentCat == 3 ? 'singer-cat-style' : ''" @click="toggleSingerCat(3)">组合</li>
            </ul>
        </div>
        <div class="singer-list w">
            <div class="top" v-if="topSinger != null">
                <div
                :key="index"
                v-for="(item, index) in topSinger"
                class="top-item">
                    <img @click="jumpSinger(item.id)" :src="item.img1v1Url">
                    <div @click="jumpSinger(item.id)" class="singer-name">{{item.name}}</div>
                </div>
            </div>
            <div class="list" v-if="bottomSinger != null">
                <span
                :key="index"
                @click="jumpSinger(item.id)"
                v-for="(item, index) in bottomSinger"
                >{{item.name}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 当前选中的歌手地区
            currentArea: -1,
            // 当前选中的歌手类型
            currentCat: -1,
            // 前十个歌手
            topSinger: null,
            // 后面的歌手
            bottomSinger: null
        }
    },
    mounted() {
        this.getSingerCat();
    },
    methods: {
        // 切换歌手地区
        toggleSingerArea(area) {
            this.currentArea = area;
            this.getSingerCat();
        },
        // 切换歌手类型
        toggleSingerCat(cat) {
            this.currentCat = cat;
            this.getSingerCat();
        },
        // 获取歌手分类
        async getSingerCat() {
            this.topSinger = [];
            this.bottomSinger = [];
            let { data: res } = await this.$http.get('/artist/list', { params: { type: this.currentCat, area: this.currentArea, limit: 80 } });
            for (var i = 0; i < res.artists.length; i++) {
                if (i < 10) {
                    this.topSinger.push(res.artists[i]);
                } else {
                    this.bottomSinger.push(res.artists[i]);
                }
            }
        },
        // 跳转到歌手页面
        async jumpSinger(id) {
            this.$router.push(`/singer/info/${id}`);
        }
    }
}
</script>

<style lang="less" scoped>
.bg {
    height: 375px;
    width: 100%;
    line-height: 375px;
    text-align: center;
    font-size: 50px;
    color: #fff;
    background: url('../assets/img/bg_singer.jpg') no-repeat;
    span {
        margin-right: 20px;
    }
}

.singer-cat {
    margin-top: 70px;
    ul {
        overflow: hidden;
        margin-bottom: 20px;
    }
    li {
        float: left;
        list-style: none;
        margin-right: 26px;
        padding: 0 8px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
        &:nth-child(1) {
            margin-right: 36px;
        }
    }
}

.singer-cat-style {
    background: #3ec481!important;
    color: #fff!important;
}

.singer-list {
    margin-top: 70px;
    .top {
        display: flex;
        flex-wrap: wrap;
        .top-item {
            width: 20%;
            display: flex;
            flex-direction: column;
            margin-bottom: 60px;
            img {
                width: 120px;
                height: 120px;
                border-radius: 50%;
                cursor: pointer;
            }
            .singer-name {
                margin-top: 20px;
                width: 120px;
                cursor: pointer;
                text-align: center;
                &:hover {
                    color: #3ec481;
                }
            }
        }
    }
    .list {
        display: flex;
        flex-wrap: wrap;
        span {
            width: 20%;
            margin-bottom: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            cursor: pointer;
            &:hover {
                color: #3ec481;
            }
        }
    }
}
</style>